<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    

    <meta name="baidu-site-verification" content="lt822VnP06" />
    <meta name="baidu-site-verification" content="0Ajixw1Puk" />
    <meta name="google-site-verification" content="gCQD0Y6f0YlPTZTAjp_mqms4C7TlkMWrg3Xy0mFdMwI" />
    <title>angularjs+bootstrap+ngDialog实现模式对话框 | Giraffe&#39;s Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="在完成一个后台管理系统时，需要用表格显示注册用户的信息。但是用户地址太长了，不好显示。所以想做一个模式对话框，点击详细地址按钮时，弹出对话框，显示地址。">
<meta property="og:type" content="article">
<meta property="og:title" content="angularjs+bootstrap+ngDialog实现模式对话框">
<meta property="og:url" content="http://yemengying.com/2015/09/08/angularjs-bootstrap-ngDialog/index.html">
<meta property="og:site_name" content="Giraffe's Home">
<meta property="og:description" content="在完成一个后台管理系统时，需要用表格显示注册用户的信息。但是用户地址太长了，不好显示。所以想做一个模式对话框，点击详细地址按钮时，弹出对话框，显示地址。">
<meta property="og:image" content="http://yemengying.com/images/runningman.jpg">
<meta property="og:updated_time" content="2018-12-14T09:26:00.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="angularjs+bootstrap+ngDialog实现模式对话框">
<meta name="twitter:description" content="在完成一个后台管理系统时，需要用表格显示注册用户的信息。但是用户地址太长了，不好显示。所以想做一个模式对话框，点击详细地址按钮时，弹出对话框，显示地址。">
<meta name="twitter:image" content="http://yemengying.com/images/runningman.jpg">
    

    

    
        <link rel="icon" href="https://yemengying.com/qiniu/image/image/favicon.png" />
    


    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/open-sans/styles.css">
    <link rel="stylesheet" href="/lib/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/lib/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/lib/fancybox/jquery.fancybox.css">
    
    
        <script type="text/javascript">
(function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-75861791-1', 'auto');
ga('send', 'pageview');

</script>
    
    
    
        <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?44bb8bfb1a576270255713e37746eb82";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

    

</head>
<body>
    <script src="//github.elemecdn.com/jiananshi/req/0.1.0/lib/req.js"></script>
    <script src="//npm.elemecdn.com/jinkela@1.2.18/umd.js"></script>
    <script src="//github.elemecdn.com/jiananshi/DisqusJS/2.0.8/index.js"></script>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Giraffe&#39;s Home</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/.">首页</a>
                
                    <a class="main-nav-link" href="/archives">归档</a>
                
                    <a class="main-nav-link" href="/categories">分类</a>
                
                    <a class="main-nav-link" href="/tags">标签</a>
                
                    <a class="main-nav-link" href="/about">关于</a>
                
                    <a class="main-nav-link" href="/message">留言</a>
                
                    <a class="main-nav-link" href="/friends">友链</a>
                
                    <a class="main-nav-link" href="/reading">正在读...</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="https://pic.yupoo.com/jiananshi/e85e4303/735cf286.jpeg" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/about">关于</a></td>
                
                    <td><a class="main-nav-link" href="/message">留言</a></td>
                
                    <td><a class="main-nav-link" href="/friends">友链</a></td>
                
                    <td><a class="main-nav-link" href="/reading">正在读...</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="https://pic.yupoo.com/jiananshi/e85e4303/735cf286.jpeg" />
            <h2 id="name">Giraffe</h2>
            <h3 id="title">Java Developer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Shanghai, China</span>
            <a id="follow" target="_blank" href="https://github.com/giraffe0813/">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                56
                <span>文章</span>
            </div>
            <div class="article-info-block">
                36
                <span>标签</span>
            </div>
        </div>
        <div class="profile-block recent-comments">
            <p class="recent-comments-title">最新评论</p>
            <ul id="disqus-recent-comments" class="recent-comments-container">
            </ul>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="http://github.com/giraffe0813" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/atom.xml" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="2015/09/08/angularjs-bootstrap-ngDialog/" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            angularjs+bootstrap+ngDialog实现模式对话框
        </h1>
    

                <div class="article-meta">
                    
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/2015/09/08/angularjs-bootstrap-ngDialog/">
            <time datetime="2015-09-08T06:07:54.000Z" itemprop="datePublished">2015-09-08</time>
        </a>
    </div>


                    
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/angularJs/">angularJs</a>
    </div>

                    
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/angularJs/">angularJs</a>, <a class="tag-link" href="/tags/bootstrap/">bootstrap</a>, <a class="tag-link" href="/tags/ngDialog/">ngDialog</a>
    </div>

                </div>
            </header>
        
        <div class="article-entry" itemprop="articleBody">
        
            
                <div id="toc" class="toc-article">
                <strong class="toc-title">文章目录</strong>
                    
                </div>
            
            <p>在完成一个后台管理系统时，需要用表格显示注册用户的信息。但是用户地址太长了，不好显示。所以想做一个模式对话框，点击详细地址按钮时，弹出对话框，显示地址。<br><a id="more"></a><br>效果如下图：</p>
<p><img src="https://pic.yupoo.com/jiananshi/233c5e1b/c8477c29.jpg" alt="图片描述"></p>
<p><img src="https://pic.yupoo.com/jiananshi/6a7674e4/d7391047.jpg" alt="图片描述"></p>
<p>通过查阅资料，选择使用ngDialog来实现，ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口。ngDialog非常小（〜2K），拥有简约的API，通过主题高度可定制的，具有唯一的依赖Angular.js。<br>ngDialog github地址:   <a href="https://github.com/likeastore/ngDialog" target="_blank" rel="external">https://github.com/likeastore/ngDialog</a><br>ngDialog Demo : <a href="http://likeastore.github.io/ngDialog/" target="_blank" rel="external">http://likeastore.github.io/ngDialog/</a><br>首先引入需要的ngdialog的js和css文件。<br>可通过CDN引入</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog.min.css  </span></div><div class="line"><span class="comment">//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog-theme-default.min.css  </span></div><div class="line"><span class="comment">//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog-theme-plain.min.css  </span></div><div class="line"><span class="comment">//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngDialog.min.js</span></div></pre></td></tr></table></figure>
<p>在user.js里的controller中注入依赖</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> userControllers = angular.module(<span class="string">'userControllers'</span>,[<span class="string">'ngDialog'</span>]);  </div><div class="line">  </div><div class="line">userControllers.controller(<span class="string">'userController'</span>,[<span class="string">'$scope'</span>,<span class="string">'$http'</span>,<span class="string">'ngDialog'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope,$http, ngDialog</span>)</span>&#123;  </div><div class="line">    $scope.name = <span class="string">'user'</span>;  </div><div class="line">    $scope.user = <span class="string">""</span>;  </div><div class="line">    $scope.address = <span class="string">""</span>;  </div><div class="line">    <span class="comment">//获取用户信息  </span></div><div class="line">    $http.get(<span class="string">'http://localhost:3000/users'</span>).success(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>&#123;  </div><div class="line">        $scope.user = data;  </div><div class="line">        <span class="built_in">console</span>.log($scope.user);  </div><div class="line">    &#125;);  </div><div class="line">    <span class="comment">//点击详细地址按钮时，跳出模式对话框  </span></div><div class="line">    $scope.clickToAddress = <span class="function"><span class="keyword">function</span> (<span class="params">address</span>) </span>&#123;  </div><div class="line">        $scope.address = address;  </div><div class="line">        ngDialog.open(&#123; <span class="attr">template</span>: <span class="string">'views/test.html'</span>,<span class="comment">//模式对话框内容为test.html  </span></div><div class="line">            className: <span class="string">'ngdialog-theme-plain'</span>,  </div><div class="line">            <span class="attr">scope</span>:$scope <span class="comment">//将scope传给test.html,以便显示地址详细信息  </span></div><div class="line">        &#125;);  </div><div class="line">    &#125;;  </div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<p>test.html(读取scope中的address并显示，表格样式采用bootstrap)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table"</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">thead</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>  </div><div class="line">            收件人姓名  </div><div class="line">        <span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>  </div><div class="line">            &#123;&#123;address.name&#125;&#125;  </div><div class="line">        <span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>  </div><div class="line">            收件地址  </div><div class="line">        <span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>  </div><div class="line">            &#123;&#123;address.content&#125;&#125;  </div><div class="line">        <span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>  </div><div class="line">            手机号  </div><div class="line">        <span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>  </div><div class="line">            &#123;&#123;address.phone&#125;&#125;  </div><div class="line">        <span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;/<span class="name">thead</span>&gt;</span>  </div><div class="line">  </div><div class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></div></pre></td></tr></table></figure>
<p>user.html (显示用户的信息，当地址不为空时，显示详细地址按钮，并点击按钮时，调用controller中的clickToAddress函数)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel panel-warning"</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"panel-heading"</span>&gt;</span>  </div><div class="line">            用户管理  </div><div class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-8"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-4"</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"input-group"</span>&gt;</span>  </div><div class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">placeholder</span>=<span class="string">"Search for..."</span> <span class="attr">ng-model</span>=<span class="string">'search'</span>&gt;</span>  </div><div class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"input-group-btn"</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-default"</span> <span class="attr">type</span>=<span class="string">"button"</span>&gt;</span>Go!<span class="tag">&lt;/<span class="name">button</span>&gt;</span>  </div><div class="line">      <span class="tag">&lt;/<span class="name">span</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table"</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">thead</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>余额 <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"glyphicon glyphicon-flash"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>&gt;</span> <span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>头像<span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>默认地址<span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">th</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">thead</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">tbody</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">ng-repeat</span>=<span class="string">"user in user | filter : search"</span> &gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123;user.userName&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>&#123;&#123;user.residualPayment&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">ng-if</span>=<span class="string">"user.url != 'undefined' "</span>&gt;</span>&#123;&#123;user.url&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">ng-if</span>=<span class="string">"user.url == 'undefined' "</span>&gt;</span>系统默认头像<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">ng-if</span>=<span class="string">"user.address.length == 0 "</span>&gt;</span>暂无默认地址<span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">ng-if</span>=<span class="string">"user.address.length != 0"</span><span class="attr">ng-repeat</span>=<span class="string">"address in user.address "</span> <span class="attr">ng-click</span>=<span class="string">"clickToAddress(address)"</span>&gt;</span>  </div><div class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-info navbar-btn"</span>&gt;</span>详细地址<span class="tag">&lt;/<span class="name">button</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;<span class="name">td</span>&gt;</span>  </div><div class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-warning navbar-btn"</span> <span class="attr">ng-click</span>=<span class="string">"remove(user._id)"</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">button</span>&gt;</span>  </div><div class="line">            <span class="tag">&lt;/<span class="name">td</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span>  </div><div class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span>  </div><div class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>git地址:<div id="badge-container-giraffe0813-hellofreshAdmin-278d259" class="hexo-github" style="width: 100%"></div>
<script src="/hexo-github/badge.js"></script>
<script type="text/javascript">
  loadStyle("/hexo-github/style.css");
  loadStyle("/hexo-github/octicons/octicons.css");
  new Badge("#badge-container-giraffe0813-hellofreshAdmin-278d259", "giraffe0813", "hellofreshAdmin", "278d259", false);
</script>
</p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="http://yemengying.com/2015/09/08/angularjs-bootstrap-ngDialog/" data-id="cjtvbuch8000dz15s3hzxvn3b" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    
        <a href="http://yemengying.com/2015/09/08/angularjs-bootstrap-ngDialog/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://yemengying.com/2015/09/08/angularjs-bootstrap-ngDialog/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/2015/09/10/使代码更简洁-一-List相关/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    使代码更简洁(一)---List相关
                
            </div>
        </a>
    
    
</nav>


    
    <script>
   DisqusJS.getArticleComments();
   </script>
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2019 Mengying Ye<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        </div>
    </div>
</footer>
        
    
   <script>
   DisqusJS.getRecentComments(document.querySelector('#disqus-recent-comments'));
   </script>



    
        <script src="/lib/fancybox/jquery.fancybox.pack.js"></script>
    


<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>
</html>
